// 右侧固定栏 

// PopupImage 的 React 组件，用于展示一个主图像和相关标签。在鼠标悬停时，会显示一个可选的弹出图像。组件使用 useState 来管理弹出图像的可见性，通过 onMouseEnter 和 onMouseLeave 事件来切换状态。主图像和标签在一个垂直排列的 div 中展示，而弹出图像在 isVisible 为真时渲染。
import { useState } from 'react';


interface PopupProps {
    imageSrc: string;   
    popupSrc?: string;   
    label1: string;       
    label2?: string;     
}

const PopupImage = ({ imageSrc, popupSrc, label1, label2 }: PopupProps) => {
    // 使用React的useState钩子来管理弹出图像的可见状态
    const [isVisible, setIsVisible] = useState(false);

   
    return (
        <div
            style={{ borderTop: '1px solid #f3efef', position: 'relative' }} 
            onMouseEnter={() => setIsVisible(true)} // 鼠标进入时显示弹出图像
            onMouseLeave={() => setIsVisible(false)} // 鼠标离开时隐藏弹出图像
        >
            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <img src={imageSrc} alt="icon" /> 
                <p>{label1}</p> 
                <p>{label2}</p> 
            </div>
            {isVisible && ( // 根据isVisible状态条件渲染弹出图像 
                <div className="popup">
                    {/*  显示弹出图像 */}
                    <img src={popupSrc} style={{ width: '100%', height: '100%' }} alt="popup" /> 
                </div>
            )}
        </div>
    );
};


export default PopupImage; 
